<template>
	<view>
		<view class="nav-tab">
			<view 
				class="li" 
				v-for="(item, index) in tabs" 
				:key="index" 
				:class="currentTab==index?'current':''"
				@click="onTabClick(index)"
			>
				<text>{{item.name}}</text>
			</view>
		</view>
		
		<view class="" v-show="currentTab == 0">
			<new-article ref="newArticle" />
		</view>
		
		<view class="" v-show="currentTab == 1">
			<material ref="material" />
		</view>
		
		<view class="" v-show="currentTab == 2">
			<school ref="school" />
		</view>
		
	</view>
</template>

<script>
	import Material from "@/pages/new/material/material"
	import School from "@/pages/new/school/school"
	import NewArticle from "@/pages/new/newArticle/newArticle"
	
	export default {
		data() {
			return {
				tabs: [
					{ name: "新人秘籍" },
					{ name: "宣传素材" },
					{ name: "商学院" },
				],
				currentTab: 0,
				
			}
		},
		
		computed: {
			userInfo () {
				return this.$store.state.userInfo
			}
		},
		
		components: {
			Material, School, NewArticle
		},
		
		onLoad() {
			// console.log(this.$refs)
			this.$refs.material.getCateData()
			// this.$refs.newArticle.getCateData()
			this.$refs.school.getCateData()
		},
		
		methods: {
			onTabClick (index) {
				if(this.currentTab == index) return
				this.currentTab = index
				// this.getPageData()
			},
			
		}
	}
</script>

<style lang="less" scoped>
page {
	background-color: #EEEEEE;
}
.nav-tab{
        width: 100%;
        position: absolute;
        height: 80px;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
		overflow-x: auto;
        z-index: 10;

        .li{
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

            text{
                color: #333;
                font-size: 26px;
            }
			&.current{

                &::after{
                    display: block;
                    content: '';
                    position: absolute;
                    bottom: 6px;
                    left: 50%;
                    margin-left: -14px;
                    width: 28px;
                    height: 6px;
                    background: red;
                }
                
                text{
                    color: red;
                }
            }
		}
}

</style>
